<template>
  <div class="detail" v-if="info">
    <div class="no">
      <div class="flexsb">
        <div class="wp-50">坞修单编号: {{ info.orderNo }}</div>
        <div class="wp-50">坞修单名称: {{ info.dockOrderName }}</div>
      </div>
    </div>

    <div class="info">
      <div class="tit">人员信息</div>
      <div class="con attr mt-2">
        <div>创建人：{{ info.createByName }}</div>
        <!-- <div>状态：</div> -->
        <div>创建时间：{{ parseTime(info.createTime) }}</div>
        <div>最终编辑时间：{{ parseTime(info.updateTime) }}</div>
        <div>报价截止日期：{{ parseTime(info.quotationEndTime) }}</div>
      </div>
    </div>

    <div class="info ship mt-2">
      <div class="tit">船舶信息</div>
      <div class="con attr mt-2">
        <div class="item">
          <span>船舶名称:</span>
          <span>{{ info.shcwShippingVo.shippingName }}</span>
        </div>
        <div class="item">
          <span>IMO编号:</span>
          <span>{{ info.shcwShippingVo.shippingNo }}</span>
        </div>
        <div class="item">
          <span>船舶类型:</span>
          <span>
            <dict-tag
              :options="dict.type.ships_type"
              :value="info.shcwShippingVo.shippingType"
            />
          </span>
        </div>
        <div class="item">
          <span>总长:</span>
          <span>{{ info.shcwShippingVo.totalLength }}</span>
        </div>
        <div class="item">
          <span>建造时间（船龄）:</span>
          <span>{{ info.shcwShippingVo.yearOfConstruction }}</span>
        </div>
        <div class="item">
          <span>国籍:</span>
          <span>{{ info.shcwShippingVo.nationality }}</span>
        </div>
        <div class="item">
          <span>船级社:</span>
          <span>
            <dict-tag
              :options="dict.type.classification_society"
              :value="info.shcwShippingVo.classificationSociety"
            />
          </span>
        </div>
        <div class="item">
          <span>船港籍:</span>
          <span>{{ info.shcwShippingVo.portRegistry }}</span>
        </div>
        <div class="item">
          <span>船东:</span>
          <span>{{ info.shcwShippingVo.shipowner }}</span>
        </div>
        <div class="item">
          <span>船管:</span>
          <span>{{ info.shcwShippingVo.shipManagement }}</span>
        </div>
      </div>
    </div>

    <div class="info mt-3">
      <div class="tit">坞修项目声明</div>
      <div class="con mt-2">
        {{ info.remark }}
      </div>
    </div>

    <div class="info mt-3">
      <div class="tit">坞修关键词</div>
      <div class="con mt-2">
        <el-table :data="info.dockImportProjectBoList">
          <el-table-column prop="projectName" label="项目名称" />
          <el-table-column prop="projectContent" label="项目说明" />
          <el-table-column prop="makeCount" label="预估数量" />
        </el-table>
      </div>
    </div>

    <div class="info mt-3">
      <div class="tit">坞修项目</div>
      <div class="table">
        <u-table
          ref="plTable"
          :data="info.dockOrderDetailBoList||[]"
          :height="700"
          use-virtual
          showBodyOverflow="title"
          showHeaderOverflow="title"
          :row-height="55"
          border
        >
          <u-table-column
            v-for="(item, index) in columns"
            :key="index"
            :resizable="item.resizable"
            :show-overflow-tooltip="item.showOverflow"
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed"
            :width="item.width"
          />
        </u-table>
      </div>
    </div>

    <div class="info mt-3">
      <div class="tit">附件</div>
      <div class="con mt-2">
        <div v-for="(item, index) in info.urlList" :key="index">
          <a :href="item" target="_blank">
            {{ item }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dockOrderDetail } from "@/api/system/dockOrder";
import { setItemNumber } from "@/utils";

export default {
  name: "detail",
  dicts: ["ships_type", "classification_society"],
  components: {},
  props: {},
  data() {
    return {
      info: null,
      columns: [
        {
          label: "项目编号",
          prop: "itemNumber",
          width: 150,
        },
        {
          label: "项目类型",
          prop: "projectName",
          showOverflow: true,
        },
        {
          label: "项目类型说明",
          prop: "projectContent",
          showOverflow: true,
        },
        {
          label: "单位",
          prop: "unit",
          width: 150,
        },
        {
          label: "数量",
          prop: "requireCount",
          width: 150,
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      dockOrderDetail(this.$route.query.id).then(({ data }) => {
        this.info = data;
        setItemNumber(data.dockOrderDetailBoList);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  padding: 40px;
  .info {
    background: #fff;
    padding: 24px 0;
    border-bottom: 1px dashed #333;
    > .tit {
      font-weight: bold;
      padding: 10px 0;
    }
  }

  .no {
    background: #fff;
    padding: 10px 0;
    border-bottom: 2px solid #333;
    > .tit {
      font-weight: bold;
      padding: 10px 0;
    }
  }

  .attr {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 15px;
    span {
      display: inline-block;
      &:first-of-type {
        margin-right: 5px;
        width: 180px;
      }
    }
  }
}
</style>
